<template>
  <div>
    <BaseVxeGrid
      ref="vxeGridRef"
      :gridOptions="gridOptions"
      :gridEvents="gridEvents"
      v-on="gridEvents"
      :loading="loading"
    >
    </BaseVxeGrid>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { VxeGridListeners, VxeGridProps } from 'vxe-table'
import BaseVxeGrid from '../components/BaseVxeGrid.vue'
// import type { IColumnStyles } from '@/components/BaseVxeType'
import type { ComponentExposed } from 'vue-component-type-helpers'

type RowVO = {
  id: number
  name: string
  role: string
  sex: string
  age: number
  date: string
  address: string
}

// // 列样式设置
// const columnStyles: Array<IColumnStyles> = [
//   {
//     specifyField: 'drug_name',
//     judgeField: 'drug_name',
//     name: '抗生素',
//     value: ['55555修改测试数据'],
//     style: {
//       backgroundColor: '#ff0000 ',
//       color: 'white',
//       fontStyle: 'italic',
//       fontSize: '14px',
//       fontWeight: 'bolder',
//     },
//   },
//   {
//     specifyField: 'drug_name',
//     judgeField: 'drug_name',
//     name: '人工贴签',
//     value: ['■◎注射用硫酸长春新碱'],
//     style: { backgroundColor: '#00ffff', color: '#ff0000', fontWeight: '900' },
//   },
// ]

const vxeGridRef = ref<ComponentExposed<typeof BaseVxeGrid<RowVO>>>()

// https://vxetable.cn/#/component/grid/checkbox/range 滑动复选框多选
const gridOptions = ref<VxeGridProps<RowVO>>({
  // keyboardConfig: {
  //   isEdit: true,
  //   isArrow: true,
  //   isEnter: true,
  //   isTab: true,
  //   isDel: true,
  //   isBack: true,
  //   isEsc: true,
  //   editMethod({ $table, row, column }) {
  //     // https://vxetable.cn/#/component/grid/keyboard/editMethod 第二个 按键编辑表格
  //     // 清空值
  //     // if (column.field) {
  //     //   row[column.field] = ''
  //     // }
  //     // 激活编辑状态
  //     $table.setEditCell(row, column)
  //   },
  // },
  // editConfig: {
  //   // trigger: 'dblclick',
  //   // mode: 'cell',
  //   // showStatus: true,
  // },
  showOverflow: true,
  virtualXConfig: {
    enabled: false,
  },
  virtualYConfig: {
    enabled: false,
  },
  aggregateConfig: {
    groupFields: ['role'],
    showTotal: true,
    contentMethod({ groupValue }) {
      // console.log('分组内容', groupValue)
      return `${groupValue} 占满一行`
    },
  },
  spanMethod({ row, column }) {
    const $grid = vxeGridRef.value?.getVxeGridRef()
    // console.log($grid && $grid.isAggregateRecord(row))
    if ($grid && $grid.isAggregateRecord(row)) {
      if (column.field === 'name') {
        console.log('跨行')
        return { rowspan: 1, colspan: 5 }
      }
      return { rowspan: 0, colspan: 0 }
    }
    return { rowspan: 1, colspan: 1 }
  },
  columns: [
    { field: 'name', title: 'Name', minWidth: 300, rowGroupNode: true },
    { field: 'role', title: 'Role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address' },
  ],
  data: [
    {
      id: 10001,
      name: 'Test1',
      role: 'Develop',
      sex: 'Woman',
      age: 28,
      date: '2025-02-01',
      address: 'test abc',
    },
    {
      id: 10002,
      name: 'Test2',
      role: 'Test',
      sex: 'Man',
      age: 22,
      date: '2025-01-01',
      address: 'Guangzhou',
    },
    {
      id: 10003,
      name: 'Test3',
      role: 'PM',
      sex: 'Woman',
      age: 32,
      date: '2025-05-01',
      address: 'Shanghai',
    },
    {
      id: 10004,
      name: 'Test4',
      role: 'Designer',
      sex: 'Man',
      age: 32,
      date: '2025-01-01',
      address: 'test abc',
    },
    {
      id: 10005,
      name: 'Test5',
      role: 'Develop',
      sex: 'Man',
      age: 30,
      date: '2025-01-01',
      address: 'Shanghai',
    },
    {
      id: 10006,
      name: 'Test6',
      role: 'Designer',
      sex: 'Man',
      age: 30,
      date: '2025-03-01',
      address: 'test abc',
    },
    {
      id: 10007,
      name: 'Test7',
      role: 'Test',
      sex: 'Woman',
      age: 29,
      date: '2025-05-01',
      address: 'test abc',
    },
    {
      id: 10008,
      name: 'Test8',
      role: 'PM',
      sex: 'Woman',
      age: 35,
      date: '2025-11-01',
      address: 'test abc',
    },
    {
      id: 10009,
      name: 'Test9',
      role: 'Test',
      sex: 'Man',
      age: 21,
      date: '2025-05-01',
      address: 'test abc',
    },
    {
      id: 10010,
      name: 'Test10',
      role: 'PM',
      sex: 'Woman',
      age: 28,
      date: '2025-03-01',
      address: 'test abc',
    },
    {
      id: 10011,
      name: 'Test11',
      role: 'Test',
      sex: 'Woman',
      age: 29,
      date: '2025-03-01',
      address: 'test abc',
    },
    {
      id: 10012,
      name: 'Test12',
      role: 'Develop',
      sex: 'Man',
      age: 37,
      date: '2025-10-01',
      address: 'test abc',
    },
    {
      id: 10013,
      name: 'Test13',
      role: 'Test',
      sex: 'Woman',
      age: 24,
      date: '2025-02-01',
      address: 'test abc',
    },
    {
      id: 10014,
      name: 'Test14',
      role: 'Develop',
      sex: 'Man',
      age: 34,
      date: '2025-08-01',
      address: 'test abc',
    },
    {
      id: 10015,
      name: 'Test15',
      role: 'Designer',
      sex: 'Man',
      age: 21,
      date: '2025-05-01',
      address: 'test abc',
    },
    {
      id: 10016,
      name: 'Test16',
      role: 'Designer',
      sex: 'Woman',
      age: 21,
      date: '2025-10-01',
      address: 'test abc',
    },
    {
      id: 10017,
      name: 'Test17',
      role: 'Test',
      sex: 'Man',
      age: 31,
      date: '2025-12-01',
      address: 'test abc',
    },
    {
      id: 10018,
      name: 'Test18',
      role: 'Develop',
      sex: 'Woman',
      age: 32,
      date: '2025-10-01',
      address: 'test abc',
    },
    {
      id: 10019,
      name: 'Test19',
      role: 'Test',
      sex: 'Man',
      age: 37,
      date: '2025-02-01',
      address: 'test abc',
    },
    {
      id: 10020,
      name: 'Test20',
      role: 'Develop',
      sex: 'Man',
      age: 41,
      date: '2025-03-01',
      address: 'test abc',
    },
  ],
  // menuConfig: {
  //   enabled: true,
  //   header: {},
  //   body: {},
  //   footer: {},
  // },
})

const loading = ref(false)

const gridEvents: VxeGridListeners<RowVO> = {
  // 禁止行编辑
  editDisabled({ row, column }) {
    console.log('禁止编辑', column.field, row)
  },
  // editActivated({ row }) {},
  sortChange({ sortList }) {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
  },
  menuClick({ menu, row, column }) {
    console.log('菜单点击', menu.code, row, column)
  },
}
</script>

<style scoped></style>
